<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS Variables</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <h2>Update CSS Variables with <span class="hjs">JS</span></h2>

    <div class="controls">
        <label for="spacing">Spacing:</label>
        <input type="range" id="spacing" name="spacing" min="10" max="200" value="10" data-sizing="px">

        <label for="blur">Blur:</label>
        <input type="range" id="blur" name="blur" min="0" max="25" value="10" data-sizing="px">

        <label for="base">Base Color</label>
        <input type="color" id="base" name="base" value="#ffc600">
    </div>

    <img src="images/pictest.jpeg" alt="picture test">

    <script src="./index.js"></script>
</body>
</html>